﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Table Slicer</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Table Slicer"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n456","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="Slicers allow you to quickly filter data. A slicer provides filtering details without the need to use drop-down lists." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="3ffdbe33-60ca-40a0-84ee-3a62327d5e1a"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="c1290b37-5dbb-4d1c-9c55-47e34ee0f71f"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="3"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="sliceruse.html">Slicer</a>
 / Table Slicer</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Table Slicer<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>Slicers allow you to quickly filter data. A slicer provides filtering details without the need to use drop-down lists.</p>

<p>The&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Slicers.TableSlicerData.html">TableSlicerData</a>&nbsp;class provides table data and filtering information for the slicer.</p>

<p>The slicer has a header, a caption, items, and a clear button. You can move, resize, delete, cut, copy, paste, undo, or redo the slicer.</p>

<p><img border="0" alt="" src="images/slicercallout.png" /></p>

<p>Items that are filtered out by another slicer are referred to as "has data items" and "no data items". Items that are filtered by the slicer are referred to as "selected items" and "unselected items".</p>

<table>
    <tbody>
        <tr>
            <td><strong>Item Type</strong></td>

            <td><strong>Description</strong></td>
        </tr>

        <tr>
            <td>no data items</td>

            <td>Items that have been filtered out by another slicer</td>
        </tr>

        <tr>
            <td>has data items</td>

            <td>Items that have not been filtered out by another slicer</td>
        </tr>

        <tr>
            <td>selected items</td>

            <td>Items filtered out by the slicer</td>
        </tr>

        <tr>
            <td>unselected items</td>

            <td>The item that has not been filtered out by the slicer</td>
        </tr>
    </tbody>
</table>

<p>The slicer synchronizes with the table filter. The following table changes cause changes in the slicer.</p>

<table>
    <tbody>
        <tr>
            <td><strong>Table Change</strong></td>

            <td><strong>Slicer Change</strong></td>
        </tr>

        <tr>
            <td>modify data</td>

            <td>Slicer items are changed</td>
        </tr>

        <tr>
            <td>modify column name</td>

            <td>Slicer caption is changed</td>
        </tr>

        <tr>
            <td>add row</td>

            <td>Slicer items are changed</td>
        </tr>

        <tr>
            <td>add column</td>

            <td>No changes</td>
        </tr>

        <tr>
            <td>delete row</td>

            <td>Slicer items are changed</td>
        </tr>

        <tr>
            <td>delete column</td>

            <td>The slicer connected to this column is removed</td>
        </tr>

        <tr>
            <td>remove table</td>

            <td>All slicers connected to this table are removed</td>
        </tr>
    </tbody>
</table>

<p>You can set options for the slicer with the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Slicers.Slicer.html">Slicer</a> class. You can also set options for the slicer with the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject.html">FloatingObject</a> class. You can specify whether the slicer is visible or locked (<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~isVisible.html">isVisible</a> or&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~isLocked.html">isLocked</a> methods). The <strong>isLocked</strong> method only has an effect if the sheet is protected.</p>

<p>You can add a slicer with the&nbsp;slicers.<a href="SpreadJS~GC.Spread.Sheets.Slicers.SlicerCollection~add.html">add</a>&nbsp;method and remove a slicer with the<strong>&nbsp;</strong>slicers.<a href="SpreadJS~GC.Spread.Sheets.Slicers.SlicerCollection~remove.html">remove</a>&nbsp;method.</p>

<p>Resizing or moving&nbsp;a row or column can cause the slicer's location and size to change based on the settings for the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicMove.html">dynamicMove</a> and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicSize.html">dynamicSize</a> methods. The following table displays the result of the dynamicMove and dynamicSize settings.</p>

<table>
    <tbody>
        <tr>
            <td><strong>DynamicMove</strong></td>

            <td><strong>DynamicSize</strong></td>

            <td><strong>Result</strong></td>
        </tr>

        <tr>
            <td>true</td>

            <td>true</td>

            <td>Slicer&nbsp;is moved and sized</td>
        </tr>

        <tr>
            <td>true</td>

            <td>false</td>

            <td>Slicer&nbsp;is moved, but not sized</td>
        </tr>

        <tr>
            <td>false</td>

            <td>true or false</td>

            <td>Slicer is not moved or sized</td>
        </tr>
    </tbody>
</table>

<h4>Using Code</h4>

<p>This example creates a table and adds a slicer.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">//create a table<br />
                datas = [<br />
                &nbsp;&nbsp;&nbsp; ["1", "NewYork", "1968/6/8", "80", "180"],<br />
                &nbsp;&nbsp;&nbsp; ["4", "NewYork", "1972/7/3", "72", "168"],<br />
                &nbsp;&nbsp;&nbsp; ["4", "NewYork", "1964/3/2", "71", "179"],<br />
                &nbsp;&nbsp;&nbsp; ["5", "Washington", "1972/8/8","80", "171"],<br />
                &nbsp;&nbsp;&nbsp; ["6", "Washington", "1986/2/2", "89", "161"],<br />
                &nbsp;&nbsp;&nbsp; ["7", "Washington", "2012/2/15", "71", "240"]];<br />
                var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);<br />
                dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];<br />
                table.setColumnName(0, dataColumns[0]);<br />
                table.setColumnName(1, dataColumns[1]);<br />
                table.setColumnName(2, dataColumns[2]);<br />
                table.setColumnName(3, dataColumns[3]);<br />
                table.setColumnName(4, dataColumns[4]);<br />
                &nbsp;<br />
                //add a slicer to the sheet and return the slicer instance.<br />
                var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");<br />
                &nbsp;//change the slicer properties.<br />
                slicer.width(200);<br />
                slicer.height(200);<br />
                slicer.position(new GC.Spread.Sheets.Point(100, 200));<br />
                slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());</td>
            </tr>
        </tbody>
    </table>
</div>

<p>This example creates a table and adds an item&nbsp;slicer.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>//create table<br />
                    var dataSource = [<br />
                    &nbsp;&nbsp;&nbsp; { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },<br />
                    &nbsp;&nbsp;&nbsp; { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },<br />
                    &nbsp;&nbsp;&nbsp; { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },<br />
                    ];<br />
                    var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);<br />
                    var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)<br />
                    //create an item slicer<br />
                    var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");<br />
                    //Add the item slicer to the dom tree.<br />
                    //The "slicerHost" is the div you want to add the slicer's dom to.<br />
                    $("#slicerHost").append(slicer.getDOMElement());</p>

                    <p>.....<br />
                    &lt;div id="slicerHost" style="height: 300px; width: 50%"&gt;&lt;/div&gt;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><div class="i-section-heading" id="i-seealso-section-heading"><span class="i-section-heading-icon"><!-- --></span><span class="i-section-heading-text">See Also</span></div><div id="i-seealso-section-content" class="i-section-content"><div class="i-see-also-link">
<a href="SpreadJS~GC.Spread.Sheets.Slicers.TableSlicerData.html">TableSlicerData class</a></div>

</div><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
